<template>
  <div class="flex items-center text-[#303030]">
    <template v-if="Number.isNaN(props.money)"> - </template>
    <template v-else>
      <n-icon class="text-[14px]" :class="props.isCny ? ' pt-[1.2px]' : ' pt-[0px]'">
        <CurrencyYen v-if="props.isCny" :style="props.symbolStyle"></CurrencyYen>
        <CurrencyDollar v-else :style="props.symbolStyle"></CurrencyDollar>
      </n-icon>
      <div class="text-[18px]" :style="props.moneyStyle">
        {{
          formatMoney(
            props.isCny
              ? props.money + (props.surcharge || 0)
              : props.money * (props.rate > 0 ? props.rate : currencyRate) +
                  (props.surcharge || 0)
          )
        }}
      </div>
    </template>
  </div>
</template>

<script setup>
import { toRefs } from "vue";
import { CurrencyDollar, CurrencyYen } from "@vicons/carbon";
import { formatMoney } from "@/utils/formatMoney";
import { useUser } from "@/stores/user";

const props = defineProps({
  money: {
    type: [String, Number],
    default: 0,
  },
  moneyStyle: {
    typetype: Object,
    default: {},
  },
  symbolStyle: {
    typetype: Object,
    default: {},
  },
  isCny: {
    type: Boolean,
    default: true,
  },
  rate: {
    type: Number,
    default: 0,
  },
  surcharge: {
    //附加费  不参与汇率计算
    type: Number,
    default: 0,
  },
});

const { currencyRate } = toRefs(useUser());
</script>

<style lang="scss" scoped></style>
